<template>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newlist" :key="item.id">
      <router-link :to="'/tabbar/newsInfo/' + item.id">
        <img class="mui-media-object mui-pull-left" :src="item.img_url">
        <div class="mui-media-body">
            <h3>{{item.title}}</h3>
          <p class="mui-ellipsis">
              <span>发表时间：{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
              <span>点击：{{item.click}}</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
// 发送 请求 获取数据 然后 在渲染到页面
export default {
    data(){
        return{
           newlist:[]//定义一个空数组，用于存储 请求的数据 
        }
    },
    created(){
        this.getNewList()
    },
    methods: {
        getNewList(){
            this.$http.get("api/getnewslist").then(result => {
                if(result.body.status==0){
                    this.newlist = result.body.message
                } else{
                    Toast("获取消息失败")
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
    li{
        .mui-media-body{
            h3{
                font-size: 14px;
                font-weight: normal;
            }
            p{
                font-size: 12px;
                display: flex;
                color: #3152f7;
                // 在 h5 c3中 中的新属性
                justify-content: space-between;
            }
        }
    }
</style>
